app.directive('searchInput', function () {
    return {
        require: "ngModel",
        scope:{
            placeholder : '@',
            width : '@',
            blurAction: "&"
        },
        template: ' <div class="search_input">'+
                        '<i class="ti-search search-icon"></i>'+
                        '<input type="text" placeholder={{placeholder}} ng-model="value" ng-blur="blurAction()" style="width: {{width}}px;">'+
                        '<i class="fa fa-times-circle clear-input" ng-click="clearInput()" ng-if="value.length>0"></i>'+
                    '</div>',
        link: function (scope, element, attributes, ngModel) {
            ngModel.$render = function() {
                scope.value = ngModel.$viewValue;
            };

            scope.clearInput = function(){
                ngModel.$setViewValue('');
                ngModel.$render();
            }
            scope.$watch('value', function(val){
                ngModel.$setViewValue(val);
                ngModel.$render();
            })

        }
    };
});